<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的主页</title>
    <link rel="stylesheet" href="css/zhuye.css">
    <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
    <style type="text/css">

p{
	padding:0; 
	margin:0; line-height:1.5em;
	}
#wrap{
	text-align:left;
	width:450px;
    height: 300px;
	background-image: url(images/bj.png);
	_background-image: url(images/bj.gif);
	background-repeat: no-repeat;
	
	}
#menu{
	float:left; 
	width:190px; 
	height: 200px;

    margin-left: -80px;
	}
	
#menu ul{
}
#menu li{
	height:30px; 
	line-height:30px; 
	text-align:right;
    list-style: none}
#menu a{color:#333;
font-size:10pt;
text-decoration:none; 
display:block; 
padding-right:25px}
#menu a:hover,#menu .on a{
	color:#007734;
	height:30px;
	line-height:30px;
	background-image: url(images/hover.png);
	_background-image: url(images/hover.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	font-weight: bold;
	font-size: 20px;
}
#content{
	float:left;
	width:50%;
	margin-left:24px;}
#content h1{
	font-size:30px; 
	font-weight:normal; 
	margin:0; 
	padding:0; 
	margin-bottom:8px;
	color: mediumvioletred;}
#content ul{
	list-style:none; 
	margin:0; 
	padding:0}
#content li{padding:3px}
#copy{clear:both}
</style>
<script type="text/javascript">

function gopage(n) 
{
  var tag = document.getElementById("menu").getElementsByTagName("li");
  var taglength = tag.length;

  for (i=1;i<=taglength;i++)
  {
    document.getElementById("m"+i).className="";
    document.getElementById("c"+i).style.display='none';
  }
    document.getElementById("m"+n).className="on";
    document.getElementById("c"+n).style.display='';
}
</script>
<script type="text/javascript">
	var t = n = 0, count;
	$(document).ready(function(){
		count=$("#banner_list a").length;
		$("#banner_list a:not(:first-child)").hide();
		$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
		$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
		$("#banner li").click(function() {
			var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
			n = i;
			if (i >= count) return;
			$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
			$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
			$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
			document.getElementById("banner").style.background="";
			$(this).toggleClass("on");
			$(this).siblings().removeAttr("class");
		});
		t = setInterval("showAuto()", 4000);
		$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
	})
	
	function showAuto()
	{
		n = n >=(count - 1) ? 0 : ++n;
		$("#banner li").eq(n).trigger('click');
	}
</script>

</head>
<body background="imgs/p1.jpg"  style="background-size:100% 100%;background-attachment: fixed;" />
     <div class="bigbox">
        <div class="shang">
			<div class="shangMian">
				<form action="http://ww.baidu,com/s"mentod="get">
			<input style="width:460px;height:40px;margin-top:15px;margin-left:210px;" class="b" type="text" name="wd"/>
			<input style="width:120px;height:45px;" class="a" type="submit" value="百度一下"/>
			</form>
			</div>
          <div id="banner">	
		
	<div id="banner_info"></div> 
    <ul>
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
   <div id="banner_list">
        <a href="#" target="_blank"><img src="imgs/p1.jpg" title="温暖小屋的书" alt="温暖小屋的书" width="730px" height="400px"/></a>
        <a href="#" target="_blank"><img src="imgs/p5.jpg" title="温暖小屋的书" alt="温暖小屋的书" width="730px" height="400px"/></a>
        <a href="#" target="_blank"><img src="imgs/p3.jpg" title="温暖小屋的书" alt="温暖小屋的书" width="730px" height="400px"/></a>
        <a href="#" target="_blank"><img src="imgs/p4.jpg" title="温暖小屋的书" alt="温暖小屋的书" width="730px" height="400px"/></a>
	</div>
</div>
        </div>
      
     <li class="daoh"><a href="">首页</a><a href="index.html"">购书</a><a href="">走进书社</a><a href="">电子书前线</a><a href="">书店</a><a href="">阅读达人</a><a href="">百度热搜</a><a href="">最新新书</a></li>
    
     <div class="tuplb">
     </div>
     <div class="new">
     <h2 style="background-color:#wrap; text-align:center; margin-top:-3px;">书总</h2>
    <div id="firstpane" class="menu_list">
	<h3 class="menu_head current">哲学</h3>
	<div style="display:block" class="menu_body">
		<a href="#">科学技术哲学</a>
		<a href="#">宗教学</a>
		
		
	</div>
	<h3 class="menu_head">经济学</h3>
	<div style="display:none" class="menu_body">
		<a href="#">应用经济学</a>
		<a href="#">理论经济学</a>
		
	
	</div>
	<h3 class="menu_head">法学</h3>
	<div style="display:none" class="menu_body">
		<a href="#">马克思主义基本原理</a>
	
	</div>
	<h3 class="menu_head">教育学</h3>
	<div style="display:none" class="menu_body">
		<a href="#">民族传统体育学</a>
		<a href="#">发展与教育心理学</a>
	
	</div>
	<h3 class="menu_head">工学</h3>
	<div style="display:none" class="menu_body">
		<a href="#">一般力学与力学基础</a>
		<a href="#">固体力学</a>
	</div>
</div>

     </div>
     
     <div class="xia">
       <div>
       
           <div id="wrap">
               <p style="font-size:25px; text-align:center;">选你的爱书</p>
<div id="menu">
<ul>
<li id="m1" class="on"><a href="#" onmouseover="javascript:gopage(1)">心理学</a></li>
<li id="m2"><a href="#" onmouseover="javascript:gopage(2)">语言文字</a></li>
<li id="m3"><a href="#" onmouseover="javascript:gopage(3)">中国文学</a></li>
<li id="m4"><a href="#" onmouseover="javascript:gopage(4)">音乐</a></li>
<li id="m5"><a href="#" onmouseover="javascript:gopage(5)">美术雕塑</a></li>
</ul>
</div>
<div id="content">
<div id="c1">
<h1>心理学</h1>
<ul>
 <li>《临床心理学》</li>
 <li>《人格心理学》</li>
 <li>《教育心理学》</li>
 <li>《医学心理学》</li>
 <li>《工业心理学》</li>
</ul>
</div>
<div id="c2" style="display:none">
<h1>语言文字</h1>
<ul>
 <li>文学语言</li>
 <li>领情而至</li>
 <li>绘声绘色</li>
 <li>五花大绑</li>
 <li>话语能力测试</li>
</ul>
</div>
<div id="c3" style="display:none">
<h1>中国文学</h1>
<ul>
 <li>《离骚》</li>
 <li>《红楼梦》</li>
 <li>《水浒传》</li>
 <li>《西游记》</li>
 <li>《资治通鉴》</li>
</ul>
</div>
<div id="c4" style="display:none">
<h1>音乐</h1>
<ul>
 <li>《中国古代音乐史简编》</li>
 <li>音乐基础论</li>
 <li>音乐</li>
 <li>快乐</li>
 <li>天籁</li>
</ul>
</div>
<div id="c5" style="display:none">
<h1>美术雕塑</h1>
<ul>
 <li>美术</li>
 <li>美术精选</li>
 <li>美术天下</li>
 <li>美术一下</li>
 <li>美术盒子</li>
</ul>
</div>
   </div>
          <div class="kdaoh">
        <p style="font-size:25px; text-align:center;">进入书店</p>
          <li><a href=""></a>/<a href=""></a>/<a href="">新湖书店</a>/<a href=""></a>/<a href=""></a></li>
           <li><a href=""></a>/<a href=""></a>/<a href="">新华书店</a>/<a href=""></a>/<a href=""></a></li>
           <li><a href=""></a>/<a href=""></a>/<a href="">云岭书店</a>/<a href=""></a>/<a href=""></a></li>
            <li><a href=""></a>/<a href=""></a>/<a href="">新知图书</a>/<a href=""></a>/<a href=""></a></li>
             <li><a href=""></a>/<a href=""></a>/<a href="">亚马逊</a>/<a href=""></a>/<a href=""></a></li>
           </div>	
         <div class="bdmr">
             <object data="imgs/DeepJack.mp4"type="video/mp4" "> 
          </div>
     </div>
     </div>
</body>

<script>
$(document).ready(function(){
	$("#firstpane .menu_body:eq(0)").show();
	$("#firstpane h3.menu_head").click(function(){
		$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
		$(this).siblings().removeClass("current");
	});
	$("#secondpane .menu_body:eq(0)").show();
	$("#secondpane h3.menu_head").mouseover(function(){
		$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
		$(this).siblings().removeClass("current");
	});
});
</script>
</html>